import '../../../assets/js/extensionFn.js'
import echarts from 'echarts'
import {count} from '../../../assets/js/help.js'
export default {
  data () {
    return {
      searchInfo: {
        area: [],
        carrier: ''
      },
      carrierArr: [],
      areaOptions: [],
      areaProps: {
        label: 'localname',
        value: 'pkAreaid',
        children: 'childAreas'
      },
      isHasChart: false
    }
  },
  created () {
    this.getDataList()
    // this.getProvinceFn()
    // this.getCarrierFn()
  },
  watch: {
    'searchInfo.area': function(val) {
      if (val && val.length > 0) {
        this.getCarrierFn()
      } else {
        this.carrierArr = []
      }
    }
  },
  methods: {
    getDataList(){
      let self = this
      let url = '/park/merchant_park_analyse/queryMerchant.do'
      API.fetchGet(url, {})
        .then(res => {
          console.log(res)
          let data = res.data
          let list = data && data.dataList ? data.dataList : []
          if (list.length > 0) {
            self.buildCharts(list)
          } else {
            self.isHasChart = false
            self.clearElement('charts-box')
          }
        }, err => {
          self.isHasChart = false
          self.clearElement('charts-box')
        })
    },
    // 查询事件
    confirmSearch () {
      let self = this
      let searchInfo = this.searchInfo
      // if (!searchInfo.area || searchInfo.area.length === 0 || searchInfo.carrier === '') {
      //   return
      // }
      let url = '/park/merchant_park_analyse/queryMerchant.do'
      let params = {
        privinceId: searchInfo.area[0] || '',
        cityId: searchInfo.area[1] || '',
        areaId: searchInfo.area[2] || '',
        carrierId: searchInfo.carrier
      }
      API.fetchGet(url, params)
        .then(res => {
          console.log(res)
          let data = res.data
          let list = data && data.dataList ? data.dataList : []
          if (list.length > 0) {
            self.buildCharts(list)
          } else {
            self.isHasChart = false
            self.clearElement('charts-box')
          }
        }, err => {
          self.isHasChart = false
          self.clearElement('charts-box')
        })
    },
    clearElement (id) {
      let $Parent = $('#'+id).parent()
      $('#'+id).remove()
      $Parent.append('<div id="'+id+'" class="'+id+'"></div>')
    },
    buildCharts (list) {
      console.log(list)
      let charts = echarts.init(document.getElementById('charts-box'))

      let colorList = ['#C23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83']
      let info = list[0]
      let data = []
      let singleDataArr = []
      let axisInfo = {
        'foodMerchantCount': {
          name: '美食',
          color: colorList[0]
        },
        'hotelMerchantCount': {
          name: '酒店',
          color: colorList[1]
        },
        'leisureMerchantCount': {
          name: '休闲娱乐',
          color: colorList[2]
        },
        'lifeMerchantCount': {
          name: '生活服务',
          color: colorList[3]
        },
        'shoppingMerchantCount': {
          name: '购物',
          color: colorList[4]
        },
        'otherMerchantCount': {
          name: '其他',
          color: colorList[5]
        }
      }
      let i = 0;
      for (let key in axisInfo) {
        let obj = {}
        obj = {
          name: axisInfo[key].name,
          value: info[key],
          itemStyle: {
            color: axisInfo[key].color
          }
        }
        singleDataArr.push(info[key])
        data.push(obj)
      }

      let option = {
        color: colorList,
        title: {
            text: '商户总览',
            // subtext: '数据来自广东艾科智泊科技股份有限公司',
            sublink: 'http://www.akeparking.cn/',
            left: '8%'
        },
        legend: {
          top: '15px'
        },
        xAxis: {
            type: 'category',
            data: ['美食', '酒店', '休闲娱乐', '生活服务', '购物', '其他']
        },
        yAxis: {
            type: 'value'
        },
        grid: {
          right: '35%'
        },
        toolbox: {
          right: '10%',
          feature: {
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            type: 'pie',
            center: ['78%', '45%'],
            radius: '28%',
            z: 10000,
            data: data
          },
          {
            type: 'bar',
            data: data
          }
        ]
      }
    
    
    
      charts.setOption(option)
      this.isHasChart = true
    },
    /**
     * 获取省份
     */
    getProvinceFn () {
      let self = this
      let url = '/park/merchant_park_analyse/queryMerchantPrivinceId.do'
      API.fetchGet(url, {})
        .then(res => {
          let list = res.data.pAreaList
          self.areaOptions = self.handleAreaOptionData(list)
        }, err => {

        })
    },
    /**
     * 根据省份Id获取其下的市
     * @param {any} privinceId 城市所属省份ID
     */
    getCityFn (privinceId) {
      let self = this
      let index = self.areaOptions.findByKey('pkAreaid', privinceId)
      let childrens = self.areaOptions[0].childAreas

      if (childrens && childrens.length > 0) {
        return
      }
      let url = '/park/merchant_park_analyse/queryMerchantCityIdByMerchantId.do'
      API.fetchGet(url, {privinceId: privinceId})
        .then(res => {          
          let list = res.data.cAreaList
          self.areaOptions[0].childAreas = self.handleAreaOptionData(list)
        }, err => {

        })
    },
    /**
     * 根据省份和城市ID获取其下的区/镇
     * @param {any} privinceId 
     * @param {any} cityId 
     */
    getAreaFn (privinceId, cityId) {
      let self = this

      let options = JSON.parse(JSON.stringify(self.areaOptions))
      let fIndex = options.findByKey('pkAreaid', privinceId)
      let sIndex = options[fIndex].childAreas.findByKey('pkAreaid', cityId)
      let children = self.areaOptions[fIndex].childAreas[sIndex].childAreas
      if (children && children.length > 0) {
        return
      }

      let url = '/park/merchant_park_analyse/queryMerchantAreaIdByCityId.do'
      API.fetchGet(url, {privinceId: privinceId, cityId: cityId})
        .then(res => {
          let list = res.data.dAreaList
          
          if (list && list.length > 0) {
            self.areaOptions[fIndex].childAreas[sIndex].childAreas = self.handleAreaOptionData(list, true)
          } else {
            let sArr = self.areaOptions[fIndex].childAreas[sIndex]
            delete sArr.childAreas
            // self.areaOptions[fIndex].childAreas[sIndex].forEach(item => {
            //   console.log(item)
            //   delete item.childAreas
            // })
          }
        }, err => {

        })
    },
    /**
     * 获取子运营商
     */
    getCarrierFn () {
      let self = this
      let searchInfo = this.searchInfo
      let url = '/park/merchant_park_analyse/getCarrier.do'
      let params = {
        privinceId: searchInfo.area[0] || '',
        cityId: searchInfo.area[1] || '',
        areaId: searchInfo.area[2] || '',
      }
      API.fetchGet(url, params)
        .then(res => {
          self.carrierArr = res.data.opList
        }, err => {

        })
    },
    /**
     * 处理搜索栏所属区域‘省/市/区域’数据
     * @param {any} list 
     * @param {any} isLastLevel 
     * @returns 
     */
    handleAreaOptionData (list, isLastLevel) {
      let arr = []
      list && list.length > 0 && list.forEach(item => {
        let childAreas = item.childAreas

        let obj = {
          pkAreaid: item.pkAreaid,
          localname: item.localname
        }
        if (!isLastLevel) {
          obj.childAreas = childAreas
        }
        arr.push(obj)
      })
      return arr
    },
    selectingCarrier (val) {
      if (val && this.searchInfo.area && this.searchInfo.area.length > 0) {
        this.getCarrierFn()
      } else {
        this.carrierArr = []
      }
    },
    handleAreaChange (val) {
      if (val && val.length > 0) {
        let len = val.length
        if (len === 1) {
          this.getCityFn(val[0])
        } else if (len === 2) {
          this.getAreaFn(val[0], val[1])
        }
      }
      
    }
  }
}